import './App.css'
import Greeting from "./Greeting.jsx";
import DisplayLimit from "./DisplayLimit.jsx";
import Counter from "./Counter.jsx";
import List from "./List.jsx";
import Img from "./Img.jsx";
import Article from "./Article.jsx";
import List2Data from "./List2.jsx";
import {Header, Section} from "./Header.jsx";

function App() {

    // 定义一个常量作为上限值
    const MAX_LIMIT = 20;
    // 定义一个常量作为下限值
    const MIN_LIMIT = -1;
    // 声明一个不可重新赋值的变量 flag
    const flag = false;
    // 声明一个可以重新赋值的变量 divContent
    let divContent

  if (flag) {
        divContent = <span>flag为 true</span>
    }else {
        divContent = <p>flag为 false</p>
    }

  const articleData = {
    title:'标题1',
    detail:{
      content:'内容1',
      active: true
    }
  }

  return (
      // 在return中，默认只能有一个div,或者制作为子父级的div, 要么用一个空标签<></>进行多级div包裹
      // 在jsx 中，标签要注意严格的闭合
    <div>
      <h1>React 学习之旅</h1>
      {/* 导入组件 */}
      <Greeting/>
      {/* 导入带参数的组件 */}
      <DisplayLimit maxLimit={MAX_LIMIT} minLimit={MIN_LIMIT}/>
      {/* 导入计数组件 */}
      <Counter maxLimit={MAX_LIMIT} minLimit={MIN_LIMIT}/>
      <p>尝试点击按钮，观察数字变化。</p>
      {divContent}
      <List/>
      <Img/>
      <Article articleData={articleData}/>

      <List2Data/>

      <Section>
        <Header>主标题</Header>
        <Section>
          <Header>副标题</Header>
          <Header>副标题</Header>
          <Header>副标题</Header>
          <Header>副标题</Header>
          <Section>
            <Header>子标题</Header>
            <Header>子标题</Header>
            <Header>子标题</Header>
            <Header>子标题</Header>
            <Section>
              <Header>子子标题</Header>
              <Header>子子标题</Header>
              <Header>子子标题</Header>
            </Section>
          </Section>
        </Section>
      </Section>
    </div>
  )
}

export default App
